<template>
    <!-- 面包屑 -->
    <Bread>
        <BreadItem to="/">首页</BreadItem>
        <TransitionGroup  name="fade-right" mode="out-in">
            <template v-if="list.length">
                <BreadItem  v-for="item in list" :key="item.id">{{ item.name }}</BreadItem>
            </template>
            <template v-else>
                <Skeleton v-for="item in other" :key="item" width="60px" height="18px" />
            </template>
        </TransitionGroup>
    </Bread>
</template>

<script setup>
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    },
    other: {
        type: Number,
        default: 2
    }
})
</script>
<style lang='scss' scoped>
</style>